<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>

<style>
.myclass {
	font-style: italic;
	color: darkblue;
}
/* 高亮css类 */
.highlight {
	color: red;
	font-size: 30px;
	background: lightblue;
}
</style>

</head>

<body>
	<div class="section">
		<h2>jQuery选择器实验室</h2>
		<input style="height: 24px" id="txtSelector" />
		<button id="btnSelect" style="height: 30px">选择</button>
		<hr />
		<div>
			<p id="welcome">欢迎来到选择器实验室</p>
			<ul>
				<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
						style="color: darkgreen" href="http://www.so.com">360</a>
				</span>
				</li>
				<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
						style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
				</span>
				</li>
				<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
						<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
				</span>
				</li>
			</ul>

			<span class="myclass ">我是拥有myclass类的span标签</span>

			<p class="myclass">我是拥有myclass的p标签</p>
			<form id="info" action="#" method="get">
				<div>
					用户名：<input type="text" name="uname" value="admin" /> 密码：<input
						type="password" name="upsd" value="123456" />
				</div>
				<div>
					婚姻状况： <select id="marital_status">
						<option value="1">未婚</option>
						<option value="2">已婚</option>
						<option value="3">离异</option>
						<option value="4">丧偶</option>
					</select>
				</div>
				<div class="left clear-left">
					<input type="submit" value="提交" /> <input type="reset" value="重置" />
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<script type="text/javascript">
	//“#id”名，选择id
	//class选择器使用".css类名"
	//','可以组合使用多个选择器
		$("#btnSelect").addClass("highlight");
		$("#marital_status").addClass("highlight");
		$(".myclass").addClass("highlight");
		document.getElementById("btnSelect").onclick = function(){
			$("p").addClass("highlight");
		}
		
	/*===层叠选择器
	"祖先选择 后代"后代选择器，祖先的后代，不管隔了几代都会被选中
	"父选择器>子选择器" 这个选择器只能作用在一代
	"A~B"兄弟选择器，只会选择A~B同级。也就是A之后到B
	不过多演示了
	*/
	$("li a").addClass("highlight");
	
	/*===属性选择器
	"selector[attribute=value]"  属性等于value
	"selector[attribute^=value]" 以value开头
	"selector[attribute$=value]" 以value结尾
	"selector[attribute*=value]" 属性包含value
	*/
	//选择a标签中属性为href并且属性中带value
	$("a[href*="baidu"]").addClass("highlight");
	
	/*===位置选择器
	语法 说明
$("selector:first")获取第一个元素
$("selector:last")获取最后一个元素
$("selector:even")获取偶位置的元素（从0开始）
$("selector:odd")获取奇数位置的元素（从0开始）
$("selector:eq(n)")获取指定位置的元素（从0开始）
	*/
	$(".myclass:first").addClass("highlight");

	//直接操作css
	$("a").css("color" , "red");
	
	//事件选择器
	$("input[name='uname']")keypress(function(event){
		$(this).css("color","red");
		})
	</script>
</body>
</html>
